import React, {
  Component
} from 'react'
import {
  WingBlank,
  WhiteSpace,
  List,
  Modal,
  Button
} from 'antd-mobile'
import styles from './index.scss'

const Item = List.Item;
const Brief = Item.Brief;

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
    };
  }
  showModal = key => (e) => {
    // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
    // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  render() {
    return (
    <div>
    <WhiteSpace size="lg" />
    <div className={styles.userHead}>
      <div className={styles.userImg}>
        <img src="http://qiniu.cllgeek.com/chrome.jpg" alt="test"/>
      </div>
      <div className={styles.userDesc}>
        <h3 className={styles.userName}>用户名称(<i>ID:151161145</i>)</h3>
        <p className={styles.shopFooter}>
          <span>余额:<b>1000</b><i></i></span>
        </p>
      </div>
    </div>
    <WhiteSpace size="lg" />
    <List>
        <Item
          thumb="../../../images/recharge.png"
          arrow="horizontal"
          onClick={() => {this.context.router.push('/user/recharge')}}
        >充值</Item>
    <Item thumb="../../../images/withdraw.png" arrow="horizontal" onClick={() => {this.context.router.push('/user/withdraw')}}>提现</Item>
      </List>
      <WhiteSpace size="lg" />
    <List>
        <Item
          thumb="../../../images/gameRecord.png"
          arrow="horizontal"
          onClick={() => {this.context.router.push('/user/gamerecord')}}
        >游戏记录</Item>
        <Item thumb="../../../images/shopCart.png" arrow="horizontal" onClick={() => {this.context.router.push('/user/exchangerecord')}}>商城兑换记录</Item>
      </List>
      <WhiteSpace size="lg" />
    <List>
        <Item
          thumb="../../../images/room.png"
          arrow="horizontal"
          onClick={this.showModal('modal')}
        >申请房间</Item>
        <Item thumb="../../../images/setting.png" arrow="horizontal" onClick={() => {this.context.router.push('/user/userset')}}>设置</Item>
      </List>
        <WhiteSpace />
        <Modal
          title="申请已受理"
          transparent
          maskClosable={false}
          visible={this.state.modal}
          onClose={this.onClose('modal')}
          footer={[{ text: '确定', onPress: () => {this.onClose('modal')(); } }]}
        >
        </Modal>
      </div>
    )
  }
}

User.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default User